<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>骡窝日报详情</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/newsContent.css">
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css"/>
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <script src="/js/common.js"></script>

	<script>
        $(function () {
            var user = JSON.parse(sessionStorage.getItem("user"));
            //打开页面默认加载第一页
            var params = getParams();
            //声明一个变量,用于当前页的增加
            var currentPage = 1;
            //总页数
            var pages;
            //存储游记的数组
            var travelArr = [];

            //定义一个函数,函数里发请求,使得变量的值金有限于该次访问
            function query() {
                    $.get("/news/" + params.id + "/content", {currentPage: currentPage}, function (data) {
                    //获取总页数
                    pages = data.pages;
                        $(".newsDetail").renderValues(data);

                });

                //获取点赞个数
                function getZenNum() {
                    $.get("/Zans/count", {type: 5, typeId: params.id}, function (data) {
                        $('#ZanNum').html(data);
                    })
                }

                getZenNum();

                //获取点赞的样式颜色
                function getZanColor() {
                    $.get('/Zans/zan', {type: 5, typeId: params.id, userId: user.id}, function (data) {
                        if (data.success) {
                            $("#goodBtn").css("color", "red");
                        } else {
                            $("#goodBtn").css("color", "");
                        }
                    })
                }

                if (user) {
                    getZanColor();
                }
                $("#goodBtn").click(function () {
                    if (!user) {
                        $(document).dialog({
                            type: 'confirm',
                            closeBtnShow: false,
                            content: '先登录下吧,亲',
                            onClickConfirmBtn: function () {
                                location.href = "/login.html"
                            }
                        })
                    }
                    $.post('/Zans/saveOrDelete', {type: 5, typeId: params.id}, function (data) {
                        getZenNum();
                        if (user) {
                            getZanColor();
                        }
                    })
                })
                //当前页加1
                currentPage = currentPage + 1;
            }

            //执行函数
            query();

            //滚动事件
            $(window).scroll(function () {
                if ($(window).height() + $(document).scrollTop() + 1 >= $(document).height()) {
                    if (currentPage <= pages) {
                        query();
                    } else {
                        $(document).dialog({
                            type: 'notice',
                            content: '<span class="info-text">已经到底了</span>',
                            autoClose: 2000
                        })
                    }
                }
            })
			//收藏功能
            //每次进入这个页面 都让访问量加1
            $.post("/collects/views",{'newsPageCollect.id':params.id},function (data) {

            })
            //获取当前登录用户的id
            var user = JSON.parse(sessionStorage.getItem("user"));
            //收藏数量显示
            if(user==null){
                //如果用户没有登录 显示普通状态
                $.get("/collects/",{'newsPageCollect.id':params.id}, function (data) {
                    console.log(data);
                    //设置浏览量
                    $("#view").html(data.views);
                    //设置点赞总数
                    $("#collect").html(data.collects);

                })
            }else {
                //如果用户登录 判断是否点赞
                $.get("/collects/",{'newsPageCollect.id':params.id,'user.id':user.id}, function (data) {
                    //判断当前用户是否收藏
                    //有收藏
                    if(data.isCollect){
                        //设置背景颜色
                        $(".collect").attr("style","");
                        //设置点赞总数
                        $("#collect").html(data.collects);
                        //设置文字
                        $("#collectText").html("已收藏");
                        //设置浏览量
                        $("#view").html(data.views);
                    }
                    //设置浏览量
                    $("#view").html(data.views);
                    //设置点赞总数
                    $("#collect").html(data.collects);
                })

            }


            //点赞收藏
            //每次进入这个页面 都让访问量加1
            $.post("/collects/views",{'newsPageCollect.id':params.id},function (data) {

            })
            //收藏数量显示
            if(user==null){
                //如果用户没有登录 显示普通状态
                $.get("/collects/",{'newsPageCollect.id':params.id}, function (data) {
                    console.log(data);
                    //设置浏览量
                    $("#browseBtn").html(data.views);
                    //设置点赞总数
                    $("#likeBtn").html(data.collects);

                })
            }else {
                //如果用户登录 判断是否点赞
                $.get("/collects/",{'newsPageCollect.id':params.id,'user.id':user.id}, function (data) {
                    //判断当前用户是否收藏
                    //有收藏
                    if(data.isCollect){
                        //设置背景颜色
                        $("#likeBtn").attr("style","color: red");
                        //设置浏览量
                        $("#browseBtn").html(data.views);

                        //设置浏览量
                        $("#browseBtn").html(data.views);
                    }
                    //设置浏览量
                    $("#view").html(data.views);
                    //设置点赞总数
                    $("#collect").html(data.collects);
                })

            }


            $("#likeBtn").click(function () {
                if (user!=null) {
                    //发送请求获取当前文章的点赞信息
                    $.ajax({
                        url: '/collects',
                        type: 'put',
                        data: {
                            'newsPageCollect.id': params.id,
                            'user.id': user.id
                        },
                        success: function (susu) {
                            $.get("/collects/",{'newsPageCollect.id':params.id,'user.id':user.id}, function (data) {
                                //判断当前用户是否收藏
                                //有收藏
                                if(susu.success){
                                    //设置背景颜色
                                    $("#likeBtn").attr("style","color: red");
                                    //设置浏览量
                                    $("#browseBtn").html(data.views);

                                    //设置浏览量
                                    $("#browseBtn").html(data.views);
                                }else {
                                    //设置背景颜色
                                    $("#likeBtn").attr("style","");
                                    //设置浏览量
                                    $("#browseBtn").html(data.views);

                                    //设置浏览量
                                    $("#browseBtn").html(data.views);
                                }

                            })

                        },
                    })
                } else {
                    $(document).dialog({
                        type: 'notice',
                        content: '<span class="info-text">亲,请先登录</span>',
                        autoClose: 2000
                    })
                }
            })


				$("#goodNum").click(function () {

                })
        })
	</script>

</head>

<body>
<div class="newsDetail">
	<div>
		<a href="javascript:history.go(-1);" style="position: absolute;top: 10px;left: 22px;">
			<span><i class="fa fa-chevron-left fa-2x" style="color: white;"></i></span>
		</a>
		<img render-src="coverUrl">

		<div class="container">
			<div class="row typeRow">
				<div class="col-4">
					<span class="type">每日推送</span>
				</div>
				<div class="col-4">
					<span class="type">骡窝窝</span>
				</div>
				<div class="col-4">
                    <span id="commentBtn">
                        <i class="fa fa-commenting-o commentBtn" style="color: #479eff;font-size: 15px"></i><a
							class="commentBtn">评论</a>
                    </span>
                </div>
            </div>
            <div class="detail">
                <h2 class="title" render-html="title"></h2>
                <h2 class="title" render-html="releaseTime"></h2>
                <div class="content" render-html="newsContent.content" style="height: 50%;width: 50%;"></div>
            </div>
            <hr/>
            <div class="container d-flex" style="height: 100%;width: 100%;">
                <div class="col-4">
                    <i class="fa fa-thumbs-o-up" id="goodBtn"
                       render-html="goodNum"></i><span id="ZanNum"></span>
                </div>
                <div class="col-4">
                    <i class="fa fa-heart-o handleBtn" id="likeBtn" render-html="likeNum">11 </i>
                </div>
                <div class="col-4">
                    <i class="fa fa-eye handleBtn" id="browseBtn" render-html="browseNum">11 </i>
                </div>
            </div>
        </div>
    </div>
</div>


</body>

</html>